<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>星型图案</title>
    <style>
        /* 题目提供的基础样式 */
        body {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
        }
        .container {
            width: max-content;
            margin: 0 auto;
            background-color: rgb(243, 255, 175);
            padding: 20px 100px;
        }
        /* 新增：让每行星星居中对齐 */
        .star-row {
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 星星容器 -->
    <div class="container" id="starContainer"></div>

    <script>
        // 1. 定义每行星星的数量（对称结构：递增→递减）
        const starCounts = [1, 3, 5, 7, 9, 9, 7, 5, 3, 1];
        // 2. 定义每行星星的颜色（上半蓝、下半红）
        const starColors = ['blue', 'blue', 'blue', 'blue', 'blue', 'red', 'red', 'red', 'red', 'red'];
        // 3. 获取容器元素
        const container = document.getElementById('starContainer');

        // 4. 循环生成每行星星
        starCounts.forEach((count, index) => {
            // 创建行元素
            const row = document.createElement('div');
            row.className = 'star-row';
            // 设置该行星星颜色
            row.style.color = starColors[index];
            // 生成对应数量的星星（用"* "拼接，trim去除末尾多余空格）
            row.textContent = '* '.repeat(count).trim();
            // 将行添加到容器
            container.appendChild(row);
        });
    </script>
</body>
</html>
